<template>
  <div class="ocean">
    <ocean-item v-for="item in oceans" :key="item.id" :ocean="item" />
  </div>
</template>

<script>
  import OceanItem from './OceanItem'
  export default {
    name: 'Ocean',
    components: {
      OceanItem
    },
    props: {
      oceans: Array
    }
  } 
</script>

<style scoped>
  .ocean {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
  }
</style>